<div class="ama-project-collaborators">
    <button *ngFor="let collaborator of (collaborators$ | async) | slice:0:3; let i=index;" mat-button
        [ngClass]="overlapCollaborators ? 'ama-collaborators-initials ama-collaborator-'+i : 'ama-collaborators-initials'"
        [matTooltip]="collaborator.username" matTooltipClass="ama-collaborator-tooltip"
        [attr.data-automation-id]="'collaborator-initial-' + collaborator.username">
        <div [outerHTML]="{ firstName: collaborator.username } |  usernameInitials"></div>
    </button>
    <span class="ama-extra-collaborators" *ngIf="(collaborators$ | async)?.length>3" [matTooltip]="collaboratorsToolTip"
        matTooltipClass="ama-collaborator-tooltip">
        +{{(collaborators$ | async).length - 3}}
    </span>
</div>
